<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!-- page specific plugin scripts -->
<script src="/ace/assets/js/date-time/bootstrap-datepicker.js"></script>

<script type="text/javascript">
	var system_basePath = "<%=basePath %>";
	$(function(){
		pageInit();
	});
	function pageInit(){
		loadOrganizationTree();
		loadStaffList();
	}
	function loadOrganizationTree(){
		$("#organization_grid").jqGridInit({
			url : "/admin/systemorganization/loadOrganizationTree.do",
			colNames : ['组织名称','状态' , '是否叶子节点', 'ID', '组织层级','上级组织', '组织路径'],
	        colModel : [ 
	                     {name : 'organization_name',index : 'organization_name',editable: true,editrules:{required:true}}, 
	                     {name : 'status',index : 'status',width:35,editable: true,edittype:"select",editoptions:{value:"0:有效;1:无效"}},
	                     {name : "is_leaf",index : "is_leaf",hidden:true,edittype:"select",editoptions:{value:"true:是;false:否"},editrules:{edithidden:true}},
	                     
	                     {name : 'organization_id',index : 'organization_id',hidden:true,key:true}, 
	                     
	                     {name : 'level',index : 'level',hidden:true},
	                     {name : 'parent_id',index : 'parent_id',hidden:true}, 
	                     {name : 'path',index : 'path',hidden:true}
	                   ],
	        caption : "组织结构",
	        editurl: "/admin/systemorganization/edit.do",//编辑保存后台的值
	        autowidth:true,
	        treeGrid: true,  
	        height:400,
	        scrollOffset:1,		//滚动条宽度
   			ExpandColumn:"organization_name",
	        treeReader:{
		    	parent_id_field: "parent_id",	//父ID，与organization_id对应，必须
		    	leaf_field: "is_leaf",			//字段是否有下级节点，如果没有此字段，全部节点都会有展开图标
		    },
		    onSelectRow:function(id){
		    	var postData = {"organization_id":id};
		    	//loadStaffList(postData);
		    	//setGridParam
		    	jQuery("#staff_grid").jqGrid('setGridParam',{ 
			        postData:postData, //发送数据 
			        page:1 
			    }).trigger("reloadGrid");
		    },
		    loadComplete:function(data){
		    	//console.log(data);
		    }
		});
		//调用系统封装的底部工具
		$("#organization_grid").navGridInit({
			edit:{
				beforeSubmit: function(postData, formid){// id=value1,value2,...  
	                //return [false,"格式不正确1"];
	                return [true];
	            }
	            
			},
			add: {
				beforeSubmit: function(postData, formid){// id=value1,value2,...  
	                var id=$("#organization_grid").jqGrid("getGridParam","selrow");
					if($("#"+id+".ui-state-highlight").length == 0){
						postData.parent_id = -1;
					}
	                return [true];	//正确的情况
	            }
			},
			del:{},
			refresh: {},
			view: {}
		});
	}
	function loadStaffList(){
		$("#staff_grid").jqGridInit({
			url : "/admin/staff/listStaff.do",
			colNames : [ '','ID', '账号','密码', '名称', '电话', '状态','性别', '组织' ],
	        colModel : [ 
						 {index : '',width:30,editrules:{edithidden:true},
							formatter:function(cellvalue, options, cell){
							 var editButton = 
								"<div name='action_buttons' class=\"action-buttons\">"+
							 		"<a class=\"blue\" onclick='pageToggle(\""+cell.staff_id+"\")' href=\"javascript:void(0);\"><i class=\"ace-icon fa fa-pencil bigger-130\"></i></a>"+
							 	"</div>";
							 return editButton;
						 }},
	                     {name : 'staff_id',index : 'staff_id',hidden:true,key:true,}, 
	                     {name : 'staff_code',index : 'staff_code',editable: true,editrules:{required:true,}}, 
	                     {name : 'password',index : 'password',editable: true,editrules:{required:true,}}, 
	                     {name : 'staff_name',index : 'staff_name',editable: true,editrules:{required:true,}}, 
	                     {name : 'phone',index : 'phone',editable: true}, 
	                     {name : 'status',index : 'status',editable: true,edittype:"select",editoptions:{value:"0:有效;1:无效"}},
	                     {name : 'sex',index : 'sex',editable: true,edittype:"select",editoptions:{value:"1:男;0:女"}}, 
	                     {name : 'organization_id',index : 'organization_id',editable: true,hidden:true} 
	                   ],
	        caption : "用户列表",
	        editurl: "/admin/staff/edit.do",//编辑保存后台的值
	       	autowidth:true,
	        height:400,
		});
		//调用系统封装的底部工具
		//调用系统封装的底部工具
		$("#staff_grid").navGridInit({
			add: {
				beforeSubmit: function(postData, formid){// id=value1,value2,...  
	                var id=$("#organization_grid").jqGrid("getGridParam","selrow");
	                postData.organization_id = id;
	                return [true];	//正确的情况
	            },
	            beforeShowForm : function(e) {
	            	var id=$("#organization_grid").jqGrid("getGridParam","selrow");
					if(!id){
						var message = "请先选择一个组织节点进行添加";
						alertError(message);
						throw(message);
					}
	            }
			},
			del:{},
			search: {},
			refresh: {},
			view: {}
		});
	}
	
	
	function showOrganizationSelectWindow(){
		var html = $("#organizationSelectWindow").html();
		bootbox.dialog({
			message	: html,
			title:"选择组织",
			buttons	:{
				"success" :
				 {
					"label" : "<i class='ace-icon fa fa-check'></i>提交",
					"className" : "btn-sm btn-success",
					"callback": function() {
						//if(success)success();
						var rowData = document.getElementsByName("iframe_organization_select")[1].contentWindow.returnSelectRow();
						$("#organization_id").val(rowData.organization_id);
						$("#organization_name").val(rowData.organization_name);
					}
				},
				"button" :
				{
					"label" : "<i class='ace-icon fa fa-times'></i>取消",
					"className" : "btn-sm",
					"callback": function() {
						//if(clear)clear();
					}
				}
			}
		});
	}
	
	function setFormInput(dataMap,formId){
		var getData = function(dataMap,obj){
			var name = obj.attr("id").split(".");
			name = name[name.length-1];
			var val = dataMap[name];
			return val;
		};
		var textInputs = $("#" + formId).find("input:not(:button)");
		for(var i=0;i < textInputs.length ; i++){
			var obj = $(textInputs[i]);
			obj.val(getData(dataMap,obj));
		}
		
		var selects = $("#" + formId).find("select");
		for(var i=0;i < selects.length ; i++){
			var obj = $(selects[i]);
			obj.val(getData(dataMap,obj));
		}
	}
	
	function editStaff(){
		$.ajax({
			url : "/admin/staff/editStaff.do",
			type:"post",
			dataType:"json",
			data:$("#staff_form").serialize(),
			success:function(data) {
				$.gritter.add({
					title: '提示',
					text: data.msg,
					class_name: 'gritter-success'
				});
				pageToggle();
			}
		});
	}
	
	function pageToggle(id){
		if(id){
			loadStaffForId(id);
			$("#staff_edit").attr("staff_id",id);
			$("#staffTab li:eq(0) a").tab('show');
		}else{
			$("#staff_edit").attr("staff_id","");
		}
		$("#organization_list").toggle();
		$("#staff_edit").toggle();
	}
	
	function loadStaffForId(id){
		$.ajax({
			url : "/admin/staff/findSystemStaffById.do",
			type:"post",
			dataType:"json",
			data:{staff_id:id},
			success : function(data) {
				setFormInput(data,"staff_form");
				
			}
		});
		
	}
	var selectstaff_id ;
</script>
<div class="row" id="organization_list">
	<!-- 组织树 -->
	<div class="col-xs-3" style="padding: 0px;border: solid 1px #E1E1E1;">
		<table id="organization_grid"></table>
	</div>
	<!-- 用户列表 -->
	<div class="col-xs-9" style="padding: 0px 0px 0px 5px;">
		<div style="width: 100%;border: solid 1px #E1E1E1;">
		    <table id="staff_grid"></table>
		</div>
	</div>
</div>
<div class="row" id="staff_edit" style="display: none;">
	<div class="page-header">
		<h1>
			编辑用户资料
			<a href="javascript:void(0)" onclick="pageToggle()">
				<small>
					<i class="ace-icon fa fa-angle-double-left"></i>
					返回列表
				</small>
			</a>
		</h1>
	</div>
	<div class="tabbable">
		<ul class="nav nav-tabs" id="staffTab">
			<li class="active" id="staff_edit_li">
				<a data-toggle="tab" href="#staffEditTab">
					<i class="green ace-icon fa fa-home bigger-120"></i>
					用户基本信息
				</a>
			</li>

			<li onclick="loadStaffRole1()">
				<a data-toggle="tab" href="#staffRole">
					用户角色信息
				</a>
			</li>
		</ul>
		<div class="tab-content">
			<div id="staffEditTab" class="tab-pane fade in active">
				<jsp:include page="staff_edit.jsp"></jsp:include>
			</div>
			<div id="staffRole" class="tab-pane fade">
				<jsp:include page="staff_role.jsp"></jsp:include>
			</div>
		</div>
	</div>
</div>


<div id="organizationSelectWindow" style="display: none;">
	<iframe src="/admin/common/organization_select.jsp?frame=1"
		 style="width: 100%;height: 374px;border: 0px;" name="iframe_organization_select"></iframe>
</div>